<template>
	<view class="product-select" :style="{ '--titleSize': titleSize }">
		<view class="title" :style="{ fontSize: titleSize }">{{ title }}</view>
		<view class="option" :style="{ '--col': col, '--color': color, '--clickColor': clickColor, gridColumnGap: colSpan, gridRowGap: rowSpan }">
			<view
				class="select"
				v-for="(item, index) in list"
				:key="index"
				@click="clickThis1(item, index)"
				:class="{ 'click-style': (is_inarray(current_list, index) >-1 && isFocus) || is_inarray(select_list, item['name_en']) >-1 }"
				:style="{ fontSize: optionSize, borderRadius: radius }"
			>
				<view :style="{ height: imgHeight, width: imgWidth }" v-if="showImg" style=" position: relative;">
					<image mode="scaleToFill" :src="item[imgSrcKey]" style="width: 104%;height: 100%;" >
						<view v-show="item.remen>0" style="position: absolute; top: -5px; right: 0; color: red; ">
							<text style="background-color: #00000070; border-radius: 3px; font-weight: 800; font-size: 10px;">热门</text>
							<!-- <image mode="aspectFill" src="/static/fengge19/remen.png" style="width: 100%;height: 100%; background-color: #00000070; border-radius: 3px;"> -->
						</view>
					</image>
				</view>
				<view class="goods" :class="{ tag: showImg, 'click-goods': current == index && showImg }">{{ item[textKey] }}</view>
			</view>
		</view>
		<slot></slot>
	</view>
</template>


<script>
export default {
	name: 'a-my-product-select',
	props: {
		// 图片src的键名
		imgSrcKey: {
			type: String,
			default: 'pic_url'
		},
		// 回显文字内容的键名
		textKey: {
			type: String,
			default: 'name_zh'
		},
		// 回显文字内容的键名
		valueKey: {
			type: String,
			default: 'name_en'
		},
		// 控制选中时是否生效选中样式
		isFocus: {
			type: Boolean,
			default: true
		},
		// 图片区域高度
		imgHeight: {
			type: String,
			default: '200rpx'
		},
		imgWidth: {
			type: String,
			default: '216rpx'
		},
		// 是否展示图片
		showImg: {
			type: Boolean,
			default: true
		},
		// 控制每行的最大列数
		col: {
			default: 3
		},
		// 回显的数据
		list: {
			required: true,
			type: Array,
			default: () => {
				return [];
			}
		},
		// 当前标题
		title: {
			type: String,
			default: ''
		},
		// 标题文字大小
		titleSize: {
			type: String,
			default: '32rpx'
		},
		// 选项字体大小
		optionSize: {
			type: String,
			default: '16rpx'
		},
		// 列间距
		colSpan: {
			type: String,
			default: '20rpx'
		},
		// 行间距
		rowSpan: {
			type: String,
			default: '12rpx'
		},
		// 选项字体颜色
		color: {
			type: String,
			default: '#000000'
		},
		// 点击项颜色
		clickColor: {
			type: String,
			default: '#cc383e'
		},
		// 圆角
		radius: {
			type: String,
			default: '4px'
		},
		
		select_num: {
			type: String,
			default: "1"
		},
		cate:{
			default:'all'
		},
		show_color:{
			default: true
		},
		select_list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			current: null,
			current_values: [],
			current_list :[],
		};
	},
	methods: {
		is_inarray(arr,value){
		for(var i = 0; i < arr.length; i++){
			if(value === arr[i]){
				return i;
			}
			}
		return -2;
		},
		clickThis(item, index) {
			this.current = index;
			this.$emit('update:isFocus', true);
			this.$emit('select', item);
		},
		clickThis1(item, index) {
			var current_index = this.is_inarray(this.current_list, index)
			
			var s_num = parseInt(this.select_num)
			if(current_index <-1){
				// 没在里面
				
				if(this.current_list.length <s_num){
					// 还没超
					this.current_list.push(index)
					this.current_values.push(item.name_en)
					this.$emit('update:isFocus', true);
					var data = {}
					data[this.cate ] = this.current_values
					this.$emit('select', data);
				}else{
					// 超个数了，把最前面那个取消了再加一个
					this.current_list.splice(0,1)
					this.current_values.splice(0,1)
					this.current_list.push(index)
					this.current_values.push(item.name_en)
					this.$emit('update:isFocus', true);
					var data = {}
					data[this.cate ] = this.current_values
					this.$emit('select', data);
				}
			}else{
				// 在里面 就直接取消
				this.current_list.splice(current_index,1)
				this.current_values.splice(current_index,1)
				this.$emit('update:isFocus', true);
				var data = {}
				data[this.cate ] = this.current_values
				this.$emit('select', data);
			}
			
			// if(this.current_list.length <s_num && current_index <-1){
			// 	this.current_list.push(index)
			// 	this.current_values.push(item.value)
			// 	this.$emit('update:isFocus', true);
			// 	this.$emit('select', item);
			// }else{
			// 	if(current_index> -1){
			// 		this.current_list.splice(current_index,1)
			// 		this.current_values.splice(current_index,1)
			// 		this.$emit('update:isFocus', true);
			// 		this.$emit('select', item);
			// 		// console.log(this.current_values)
			// 	}
			// }
			// console.log(this.current_values)
		}
	}
};
</script>

<style lang="scss" scoped>
.product-select {
	max-height: 350px;
	overflow-y: scroll;
	box-sizing: border-box;
}

.title {
	color: #000000;
	font-weight: bold;
}

.option {
	display: grid;
	grid-template-columns: repeat(var(--col), 1fr);
	margin: 20rpx 0;
}

.select {
	border: 6px solid rgba(229, 229, 229, 1);
	text-align: center;
	color: var(--color);
	background-color: #ffffff;
}

.goods {
	padding: 6rpx 0;
	// width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	// font-size: 16px;
	// font-weight: 600;

}

// 不显示图片时点击选择项的样式
.click-style {
	border-color: var(--clickColor);
	> .goods {
		background-color: #fff;
		color: var(--clickColor);
	}
}

// 显示图片时点击选择项的样式
.click-style > .click-goods {
	background-color: var(--clickColor);
	color: #fff;
}

.tag {
	background-color: #f2f2f2;
}
</style>
